<template>
	<u-popup :blur="0" mode="bottom" :border-radius="borderRadius" :popup="false" v-model="popupValue" :maskCloseAble="true"
	    length="auto" :safeAreaInsetBottom="true" @close="popupClose" :z-index="uZIndex">
		<view class="u-tips u-border-bottom">
			<view>需支付</view>
			<view class="payment-amount-box"><text class="payment-amount">{{ vk.pubfn.priceFilter(totalFee) }}</text><text>元</text></view>
			<text>请选择支付方式</text>
		</view>

		<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
		<view @touchmove.stop.prevent class="pay-action-sheet-item u-line-1" :hover-stay-time="150" @click.stop="pay('alipay')">
			<view><u-icon name="zhifubao-circle-fill" color="#2979ff" size="34"></u-icon><text class="pay-action-sheet-item___text">支付宝</text></view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 || APP-PLUS || MP-WEIXIN -->
		<view @touchmove.stop.prevent class="pay-action-sheet-item u-line-1" :hover-stay-time="150" @click.stop="pay('wxpay')">
			<view><u-icon name="weixin-fill" color="#19be6b" size="34"></u-icon><text class="pay-action-sheet-item___text">微信</text></view>
		</view>
		<!-- #endif -->

		<view class="u-gab" v-if="cancelBtn"> </view>
		<view @touchmove.stop.prevent class="u-actionsheet-cancel pay-action-sheet-item" hover-class="u-hover-class"
		    :hover-stay-time="150" v-if="cancelBtn" @tap="close">{{cancelText}}</view>
	</u-popup>
</template>

<script>
	export default {
		name: "pay-action-sheet",
		props: {
      // 通过双向绑定控制组件的弹出与收起
      value: {
      	type: Boolean,
      	default: false
      },
			// 底部的取消按钮
			cancelBtn: {
				type: Boolean,
				default: true
			},
			// 弹出的顶部圆角值
			borderRadius: {
				type: [String, Number],
				default: 0
			},
			// 弹出的z-index值
			zIndex: {
				type: [String, Number],
				default: 0
			},
			// 取消按钮的文字提示
			cancelText: {
				type: String,
				default: '取消'
			},
			totalFee:{
				type: [Number,String],
				default: 0
			}
		},
		computed: {
			uZIndex() {
				// 如果用户有传递z-index值，优先使用
				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
			}
		},
    data() {
      return {
        popupValue:false,
      };
    },
    watch: {
      value(v1, v2) {
        this.popupValue = v1;
      }
    },
		methods: {
			// 点击取消按钮
			close() {
				// 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
				// 这是一个vue发送事件的特殊用法
				this.popupClose();
				this.$emit('close');
			},
			// 弹窗关闭
			popupClose() {
				this.$emit('input', false);
			},
			pay(payType){
				//this.popupClose();
				this.$emit('click', payType);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni_modules/vk-uview-ui/libs/css/style.components.scss";

	.u-tips {
		font-size: 26rpx;
		text-align: center;
		padding: 34rpx 0;
		line-height: 1.5;
		color: $u-tips-color;
	}

	.pay-action-sheet-item {
		@include vue-flex;;
		line-height: 1;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		padding: 34rpx 0;
		flex-direction: column;
	}
	.pay-action-sheet-item___text{
		margin-left: 10rpx;
	}

	.pay-action-sheet-item__subtext {
		font-size: 24rpx;
		color: $u-tips-color;
		margin-top: 20rpx;
	}

	.u-gab {
		height: 12rpx;
		background-color: rgb(234, 234, 236);
	}

	.u-actionsheet-cancel {
		color: $u-main-color;
	}

	.payment-amount-box{
		color: #ff623e;font-weight: bold;
		.payment-amount{
			font-size: 50rpx;margin-right: 10rpx;
		}
	}
</style>
